<template>
	<view>
		<view class="titie">我的名字</view>
		<view class="searchbar-box">
			<input class="searchbar-input" confirm-type="search" type="text" placeholder-style="color:#979797;
					font-size:29rpx;" placeholder="请输入名字" :value="name" @input="namedata" />
			<image @click="empty" style="width: 33rpx;height: 33rpx;" src="../../static/icon/close.png"></image>
		</view>
		<view class="buttom" @click="buttoma">保存</view>
	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	let app = getApp();
	export default {
		data() {
			return {
				name: '',
			}
		},

		onLoad(e) {
			this.name = e.name
		},

		methods: {
			//清空输入名字
			empty(e) {
				this.name = ''
			},

			//输入名字
			namedata(e) {
				this.name = e.detail.value
			},

			//提交修改名字
			async buttoma(e) {
				if (this.name == '') {
					uni.showToast({
						title: '请输入名字',
						icon: "none",
					})
				}

				let apply = await request(`${getApp().globalData.http}user/user_update`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					token: getApp().globalData.token,
					name: this.name,
				})
				if (apply.data.code == 0) {
					uni.showToast({
						title: apply.data.message,
						icon: "none",
						duration: 2000
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 2000)
					uni.setStorageSync("update_quedindel", 1)
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding: 20rpx;
		background-color: #ffffff;
	}

	.titie {
		font-size: 31rpx;
		color: #8F8F8F;
	}

	.searchbar-box {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		border-bottom: 1px solid #E8E8E8;
	}

	.searchbar-input {
		height: 100rpx;
		flex: 1;
	}

	.buttom {
		height: 90rpx;
		background-color: #6f5ce3;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 33rpx;
		font-weight: bold;
		color: #ffffff;
		margin: 0 auto;
		margin-top: 80rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}
</style>